<template>
  <div>
    <el-form v-model="formdata">
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label="做单日期">
            <el-date-picker
              @change="dateChange"
              v-model="formdata.time"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formdata.keyword" style="width: 70%" @change="getList" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单状态">
            <el-select v-model="formdata.status" placeholder="请选择" @change="getList">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-refresh" @click="getList" type="primary" circle></el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      border>
      <div v-for="(item, index) in columns" :key="index">
        <el-table-column  :label="item.label" v-if="item.slot">
          <template slot-scope="scope" v-if="item.slot">
            <span v-if="item.label === '操作员'">
              {{scope.row.sysUser.name}}
            </span>
            <span v-else-if="item.label === '办理状态' && scope.row.status === 0">
              办理失败
            </span>
            <span v-else-if="item.label === '办理状态' && scope.row.status === 1">
              办理成功
            </span>
          </template>
        </el-table-column>

        <el-table-column  :label="item.label" :prop="item.key" v-else>
        </el-table-column>
      </div>
    </el-table>
    <el-pagination
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="pageNo"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
  </div>
</template>

<script>
import api from '@/api/modular/main/businessHandling.js'
import util from '@/api/modular/main/util.js'
export default {
  data() {
    return {
      loading: false,
      pageSize: 10,
      pageNo: 1,
      totalPage: 0,
      totalNum: 0,
      tableData: [],
      columns: [
        {
          key: 'operator',
          label: '操作员',
          slot: true
        },
        {
          key: 'createTime',
          label: '日期'
        },
        {
          key: 'phone',
          label: '手机号码'
        },
        {
          key: 'status',
          label: '办理状态',
          slot: true
        },
        {
          key: 'name',
          label: '套餐名称'
        }
      ],
      statusOptions: [
        {
          label: '办理成功',
          value: '1'
        },
        {
          label: '办理失败',
          value: '0'
        }
      ],
      formdata: {
        keyword: '',
        time: '',
        status: ''
      }
    }
  },
  methods: {
    dateChange(date) {
      if (date === null) {
        this.formdata.time = ''
      }
      this.getList()
    },
    sizeChange(size) {
      this.pageSize = size
      this.getList()
    },
    pageChange(pageNo) {
      this.pageNo = pageNo
      this.getList()
    },
    getList() {
      try {
        this.loading = true
        const param = {
          keyword: this.formdata.keyword,
          searchBeginTime: this.formdata.time[0],
          searchEndTime: this.formdata.time[1],
          status: this.formdata.status,
          pageSize: this.pageSize,
          pageNo: this.pageNo
        }
        const paramStr = util.transformGetParam(param)
        api.getUpgratingOrder(paramStr).then(res => {
          this.tableData = res.data.rows
          this.totalPage = res.data.totalPage
          this.pageNo = res.data.pageNo
          this.totalNum = res.data.totalRows
        }).catch(() => {
          this.$message.error('获取订单列表失败')
        })
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 500)
      }
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style>

</style>
